import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {List, Button, Icon} from 'antd-mobile';
import lane from './lane.css'

const Item = List.Item;


@inject('carOrderStore')
@observer
class CarPay extends Component {

    componentDidMount() {
        let userAgent = window.navigator.userAgent.toLowerCase();
        let weixinpay = userAgent.match(/MicroMessenger/i);
        if (weixinpay) {
            this.isWeixin = true;
            if (typeof WeixinJSBridge === "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(), false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady());
                    document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady());
                }
            } else {
                this.onBridgeReady();
            }
        } else {
            this.isWeixin = false;
        }

        this.props.carOrderStore.getOrderInfo(this.props);
    }

    render() {
        const {plateNumber, payments, parkingTime, paySubmit, isLoading, detail, commCode, attach2} = this.props.carOrderStore;
        return (
            <div>{isLoading ? <div style={{float: 'right', padding: '10px'}}>
                    <Icon type="loading"/>
                </div> :
                <div>
                    <div style={{
                        backgroundColor: '#5DB75D',
                        width: '100%',
                        height: '180px',
                        fontSize: '25px',
                        textAlign: 'center',
                        lineHeight: '180px',
                        color: '#fff'
                    }}>
                        {payments > 0 ? '应付费用：' + payments + '元' : '不需要缴纳费用'}
                    </div>
                    <List>
                        <Item extra={plateNumber ? plateNumber : ''}>车牌号</Item>
                        <Item extra={parkingTime ? parkingTime : ''}>停车时长</Item>
                    </List>
                    {!this.isWeixin ?
                        <form action="/api/v2/pay/anon/alipay/H5/order">
                            <input type="hidden" name="totalFee" value="0.01"/>
                            <input type="hidden" name="payableFee" value={payments}/>
                            <input type="hidden" name="orderType" value="CAR_LANE"/>
                            <input type="hidden" name="commCode" value={commCode}/>
                            <input type="hidden" name="body" value="车辆临时缴费"/>
                            <input type="hidden" name="detail" value={detail}/>
                            <input type="hidden" name="attach" value={plateNumber}/>
                            <input type="hidden" name="attach2" value={attach2}/>
                            {payments > 0 ? <div style={{
                                width: '100%',
                                position: 'fixed',
                                bottom: 0
                            }}>
                                <button type="submit" className="am-button am-button-submit" style={{width: '100%'}}>
                                    确定支付
                                </button>
                            </div> : ""}
                        </form>
                        :
                        payments > 0 ?
                            <div style={{
                                width: '100%',
                                position: 'fixed',
                                bottom: 0
                            }}>
                                <Button className="am-button-submit" onClick={() => paySubmit(this.props)}>确定支付</Button>
                            </div> : ''
                    }
                </div>
            }
            </div>
        );
    }
}

export default CarPay;